<template>
  <div>
    <div>
      <el-radio-group
        size="mini"
        v-model="searchForm.matchStep"
        @change="searchList()"
      >
        <el-radio-button
          v-for="item in tabList"
          :key="item.label"
          :label="item.label"
          >{{ item.name }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <div style="margin-top: 10px;">
      <el-radio-group
        size="mini"
        v-model="searchForm.recommendType"
        @change="searchList()"
      >
        <el-radio-button :label="1">推荐申请产品</el-radio-button>
        <el-radio-button :label="2">暂不匹配产品</el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 10px;">
      <el-table :data="tableData.data" border style="width: 100%" size="mini" v-loading = "listLoading" >
        <el-table-column align="center" label="产品名称">
          <template slot-scope="scope">
            <div class="productNameStyle">
              <div class="image">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="scope.row.productPic"
                  :preview-src-list="[scope.row.productPic]"
                >
                </el-image>
              </div>
              <div class="name-msg">
                <div style="color: #222; font-weight: bold">
                  {{ scope.row.productName }}
                </div>
                <div style="color: #999">ID: {{ scope.row.id }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品所属银行" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.bankName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="额度区间" align="center">
          <template slot-scope="scope">
            <span
              >{{ scope.row.productMinQuota }}万 -
              {{ scope.row.productMaxQuota }}万</span
            >
          </template>
        </el-table-column>
        <el-table-column label="可贷额度" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.quota ? `${scope.row.quota}万` : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品备注(可填写)" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.note"
              size="mini"
              placeholder="请输入内容"
              type="textarea"
              clearable
              @change="changeNote(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pageRight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMatchResultList } from "@/api/customer";
import { postremark } from "@/api/product";
export default {
  name: "developPlan",
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      tabList: [],
      searchForm: {
        matchStep: 1,
        recommendType: 1,
        pageNum: 1,
        pageSize: 10
      },
      tableData: {
        data: [],
        total: 0
      },
      listLoading: false
    };
  },
  async created() {
    await this.getTabList();
    await this.getList();
  },
  methods: {
    searchList() {
      this.searchForm.pageNum = 1;
      this.getList();
    },
    changeNote(row) {
      let params = {
        id: row.id,
        note: row.note
      };
      postremark(params).then(res => {
        this.$message.success("修改成功");
      });
    },
    getTabList() {
      const matchStepTabs = {
        0: [{ name: "匹配结果", label: 1 }],
        1: [{ name: "匹配结果", label: 1 }],
        2: [
          { name: "匹配结果", label: 1 },
          { name: "征信匹配", label: 2 }
        ],
        3: [
          { name: "匹配结果", label: 1 },
          { name: "征信匹配", label: 2 },
          { name: "专家匹配", label: 3 }
        ]
      };

      this.tabList = [...(matchStepTabs[this.detailInfo.matchStep] || [])];
    },
    getList() {
      this.listLoading = true;
      let params = {
        id: this.detailInfo.id,
        type: this.detailInfo.matchType,
        ...this.searchForm
      };
      getMatchResultList(params).then(res => {
        this.tableData.data = res.data.list;
        this.tableData.total = res.data.total;
        this.listLoading = false;
      }).then(res=> {
        this.listLoading = false;
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.productNameStyle {
  display: flex;
  height: 80px;
  padding: 10px;
  .image {
    width: 60px;
    height: 60px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .name-msg {
    margin-left: 10px;
    // padding: 10px 0;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-direction: column;
  }
}
</style>
